<template>
  <app-dialog-form
      :title="fileName"
      :confirm="handleSubmit"
      :primary-btn="false"
      @closed="handleDialogClosed"
      @open="handleDialogOpen"
  >
    <div @click="copyUrl" style="margin-top: -30px;margin-bottom: 10px;color: #1c6ca1">
      视频地址:{{ path }}
    </div>
    <video v-if="path!==''" style="width: 100%;max-height: 700px" ref="video" controls>
      <source :src="path">
    </video>
  </app-dialog-form>

</template>

<script setup lang="ts">
import {ref, nextTick} from "vue";
import Hls from 'hls.js'
import {copy} from "@/utils/constants";
import {ElMessage} from "element-plus";

const fileName = ref('')
const path = ref('')
const video = ref<HTMLVideoElement | null>(null);
let hls: Hls | null = null
// 播放视频方法
const playVideo = (src: string, name: string) => {
  fileName.value = name
  path.value = src
  nextTick(() => {
    if (src.endsWith('.m3u8')) {
      // m3u8格式就hls
      hls = new Hls();
      hls.loadSource(src);
      hls.attachMedia(video.value!);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.value?.play();
      });
    } else {
      video.value?.play();
    }
  })
}
defineExpose({playVideo})

const copyUrl=()=>{
  copy(path.value)
  ElMessage.success(`地址【${path.value}】已拷贝!`)
}

const handleSubmit = async () => {
  return true
}

const handleDialogClosed = () => {
  path.value = ''
  hls?.destroy()
  hls = null;
}

const handleDialogOpen = () => {

}

</script>

<style lang="scss" scoped>

</style>
